import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, DatePicker, Form, Input, Row, Table} from 'antd';
import Constants from '../../utils/Constants';
import RoleSelect from '../../components/common/roleSelect';

const { RangePicker } = DatePicker;
const R = require('ramda');
const FormItem = Form.Item;

const receiptStatisticsReport = Form.create()(class ReceiptStatisticsReport extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        //多个页面共用一个state的page跟list，这里面的首次查询必须带默认的page信息
        this.props.dispatch({ type: 'report/getReceiptStatistics', payload: { ...R.pick(['page', 'size'], Constants.DEFAULT_PAGE) } });
    }

    handleSearch = (flag) => {
        let values = this.props.form.getFieldsValue();
        values.drstartDate = R.isNil(values.deliveryTime) || R.isEmpty(values.deliveryTime) ? null : values.deliveryTime[0].format(Constants.DATEFORMAT);
        values.drEndDate = R.isNil(values.deliveryTime) || R.isEmpty(values.deliveryTime) ? null : values.deliveryTime[1].format(Constants.DATEFORMAT);
        values.deliveryTime = undefined;
        let newPage = R.pick(['page', 'size'], this.props.report.page);
        if (flag) newPage.page = 1;
        this.props.dispatch({
            type: 'report/getReceiptStatistics',
            payload: {
                ...values,
                ...newPage
            }
        });
    };

    
    columns = [
        { title: '订单号', dataIndex: 'orderno', key: 'orderno', width: '200px' },
        { title: '客户名称', dataIndex: 'company_name', key: 'companyName', width: '330px' },
        { title: '业务报价', dataIndex: 'quote_price', key: 'quote_price' },
        { title: '报价币种', dataIndex: 'currency', key: 'currency' },
        { title: '业务报价(CNY)', dataIndex: 'quote_price_cny', key: 'quote_price_cny' },
        { title: '收款', dataIndex: 'payMoney', key: 'payMoney'},
        { title: '余额', dataIndex: 'balance', key: 'balance' },
        { title: '业务员', dataIndex: 'ywUser', key: 'ywUser' },
        { title: '操作员', dataIndex: 'gdUser', key: 'gdUser' }
    ];

    render() {
        let dataSource = R.isNil(this.props.report.dataSource) ? {} : this.props.report.dataSource;
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
        const { getFieldDecorator } = this.props.form;
        let values = this.props.form.getFieldsValue();
        values.drstartDate = R.isNil(values.deliveryTime) || R.isEmpty(values.deliveryTime) ? null : values.deliveryTime[0].format(Constants.DATEFORMAT);
        values.drEndDate = R.isNil(values.deliveryTime) || R.isEmpty(values.deliveryTime) ? null : values.deliveryTime[1].format(Constants.DATEFORMAT);
        values.deliveryTime = undefined;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            current: this.props.report.page.page,
            pageSize: this.props.report.page.size,
            total: this.props.report.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = R.pick(['page', 'size'], this.props.report.page);
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'report/getReceiptStatistics',
                    payload: {
                        ...values,
                        ...newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = R.pick(['page', 'size'], this.props.report.page);
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'report/getReceiptStatistics',
                    payload: {
                        ...values,
                        ...newPage
                    }
                });
            }
        }
        return (
            <div>
                <Row>
                    <Col span={8}><FormItem {...formItemLayout} label={'客户号'}>{getFieldDecorator('cstNo')(<Input />)}</FormItem></Col>
                    <Col span={8}><FormItem {...formItemLayout} label={'客户名称'}>{getFieldDecorator('cstName')(<Input />)}</FormItem></Col>
                </Row>
                <Row>
                    <Col span={8}><FormItem {...formItemLayout} label={'业务员'}>{getFieldDecorator('ywUser')(<RoleSelect role={Constants.ROLE.SALES_MAN} style={{ width: '100%' }} />)}</FormItem></Col>
                    <Col span={8}><FormItem {...formItemLayout} label={'操作员'}>{getFieldDecorator('gsUser')(<RoleSelect role={Constants.ROLE.GD_MAN} style={{ width: '100%' }} />)}</FormItem></Col>
                </Row>
                <Row>
                    <Col span={8}><FormItem {...formItemLayout} label={'操作时间'}>{getFieldDecorator('deliveryTime')(<RangePicker
                        style={{ width: '100%' }}
                        showTime={{ format: 'YYYY-MM-DD' }}
                        format="YYYY-MM-DD"
                        placeholder={['开始时间', '结束时间']}
                    />)}</FormItem></Col>
                     <Col span={7} style={{ marginLeft: 42 }}>
                        <Button type="primary" icon="search" style={{ marginLeft: 5 }} onClick={this.handleSearch.bind(this, true)}>查询</Button>
                    </Col>
                </Row>


                <Table loading={this.props.loading} rowKey={record => record.cstId} dataSource={this.props.report.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} />
            </div>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.report, report: state.report
    };
}

export default connect(mapStateToProps)(receiptStatisticsReport);